<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @submit="handleSearch" :autoFormCreate="(form)=>{this.searchForm = form}">
        <a-row :gutter="12">
          <a-col :md="6" :sm="12">
            <a-form-item label="产品名称" fieldDecoratorId="name">
              <a-input placeholder=""/>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="12">
            <a-form-item label="类别" fieldDecoratorId="category_id">
              <a-select placeholder="请选择">
                <a-select-option v-for="item in categories" :key="item.id">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="12">
            <span class="table-page-search-submitButtons">
              <a-button type="primary" htmlType='submit'>查询</a-button>
              <a-button style="margin-left: 8px" @click="handleReset">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="table-operator">
      <a-button type="primary" @click="handleAdd" icon="plus">新增</a-button>
    </div>
    <s-table
      ref="table"
      size="middle"
      :columns="columns"
      :data="loadData"
    >
      <template slot="action" slot-scope="text, record">
        <div class='editable-row-operations'>
          <a @click="showInfoList(record)">管理商品</a>
          <a-divider type="vertical" />
          <a @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical" />
          <a-popconfirm title="确定要删除此商品吗？" okText="是" cancelText="否">
            <a @click="handleDelete(record)">删除</a>
          </a-popconfirm>
        </div>
      </template>
    </s-table>

    <a-modal
      :title="selectedGoods.name"
      :width="800"
      v-model="infoListVisible"
      @ok="handleOk"
      @cancel="infoListVisible = false"
    >
      <div class="wawa-info">
        <div class="wawa-info-group" v-for="(info, index) in infoList" :key="info.id">
          <h3 class="group-title">
            <a-select v-model="info.branch_id" placeholder="请选择门店" style="width: 120px">
              <a-select-option style="width: 100px" v-for="d in filterBranches(index)" :key="d.id">{{ d.name }}</a-select-option>
            </a-select>
          </h3>
          <div class="group-container">
            <a-form layout="inline">
              <a-row class="form-row" :gutter="16">
                <a-col :md="12" :sm="24">
                  <a-form-item label='状态'>
                    <a-radio-group name="radioGroup" v-model="info.is_listing">
                      <a-radio :value="true">上架</a-radio>
                      <a-radio :value="false">下架</a-radio>
                    </a-radio-group>
                  </a-form-item>

                  <a-form-item label="是否推荐">
                    <a-radio-group name="radioGroup" v-model="info.recommended">
                      <a-radio :value="true">推荐</a-radio>
                      <a-radio :value="false">不推荐</a-radio>
                    </a-radio-group>
                  </a-form-item>
                </a-col>
                <a-col :md="12" :sm="24">
                  <a-form-item label="权重">
                    <a-input v-model="info.stock" placeholder="请输入权重" />
                  </a-form-item>

                  <a-form-item label="标签">
                    <a-checkbox-group :options="fTags" v-model="info.tids" />
                  </a-form-item>
                </a-col>
                <a-col :md="12" :sm="24">
                  <a-form-item label='库存变更'>
                    <template v-if="info.sku_stock && info.sku_stock.length > 0">
                      <a-table
                        :columns="skuColumns"
                        :dataSource="info.sku_stock"
                        :pagination="false"
                        size="small"
                        bordered
                      >
                        <template slot="name" slot-scope="text">
                          {{ text | getName }}
                        </template>
                        <template slot="add_stock" slot-scope="text, record">
                          <a-input 
                            style="width: 80px;"
                            v-model.number="record.add_stock"
                          />
                        </template>
                      </a-table>
                    </template>
                    <template v-else>
                      <span>当前库存: {{ info.stock }}</span>
                      <span>增加库存:<a-input v-model.number="info.add_stock" placeholder="请输入库存变更量" /></span>
                    </template>
                    
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </div> 
        </div>
        <div class="wawa-info-group">
          <h3 class="group-title"><a-button type="primary" @click="addInfo">添加</a-button></h3>
        </div>
      </div>
    </a-modal>
  </a-card>
</template>
<script>
import STable from '@/components/table/'
import { getGoodsList, deleteGoods } from '@/api/goods'
import { getGoodsInfoList, updateInfos } from '@/api/info'
import { getCategoryList } from '@/api/category'
import { getBranchList } from '@/api/branch'
import { getTagList } from '@/api/tag'
import router from '@/router'

export default {
  name: 'GoodsList',
  components: {
    STable
  },
  data() {
    return {
      infoVisible: false, // 修改添加门店
      infoListVisible: false, // 门店列表
      selectedGoods:{},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
      },
      categories: [],
      tags: [],
      fTags: [], // 过滤后标签列表
      tids: [],
      branches : [],
      form: null,
      infoForm: null,
      info: {},
      skus: [],
      stock: 0,
      // 查询参数
      searchForm: null,
      queryParam: {},
      // 表头
      columns: [
        {
          title: 'SKU',
          dataIndex: 'sku'
        },
        {
          title: '名称',
          dataIndex: 'name'
        },
        {
          title: '品牌',
          dataIndex: 'brand.name'
        },
        {
          title: '类别',
          dataIndex: 'category.name'
        },
        {
          title: '兑换个数',
          dataIndex: 'exchange_price'
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: '180px',
          scopedSlots: { customRender: 'action' },
        }
      ],
      infoList: [],
       // 门店表表头
      skuColumns: [
        {
          title: 'SKU',
          dataIndex: 'attrs',
          scopedSlots: { customRender: 'name' }
        },
        {
          title: '当前库存',
          dataIndex: 'stock',
          width: '75px'
        },
        {
          title: '增加库存',
          dataIndex: 'add_stock',
          width: '75px',
          scopedSlots: { customRender: 'add_stock' }
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: params => {
        return getGoodsList(Object.assign(params, this.queryParam))
          .then(res => {
            return res.data
          })
      },
    }
  },
  created () {
    this.getCategoryList()
    this.getBranchList()
    this.getTagList()
  },
  filters: {
    getName(attrs) {
      let r = []
      attrs.forEach(item => {
        r.push(item.k_name + ':' + item.v_name)
      })
      return r.join(',')
    }
  },
  methods: {
    getCategoryList: function () {
      getCategoryList().then(res => {
        this.categories = res.data.data
      })
    },
    getBranchList: function () {
      getBranchList().then(res => {
        this.branches = res.data.data
      })
    },
    getTagList() {
      getTagList().then(res => {
        this.tags = res.data.data.map(item => {
          return {
            value: item.id,
            label: item.name,
            type: item.exchange_type
          }
        })
        // this.fTags = this.tags.filter(item => item.type === this.goods.is_online || item.type === 9)
      })
    },
    handleSearch(e) {
      e.preventDefault()
      this.queryParam = {
        filter: {
          name: this.searchForm.getFieldValue('name'),
          category_id: this.searchForm.getFieldValue('category_id'),
        }
      }
      this.$refs.table.refresh()
    },
    handleReset() {
      this.searchForm.resetFields()
      this.queryParam = {}
      this.$refs.table.refresh()
    },
    handleAdd() {
      router.push({name: 'AddGoods'})
    },
    handleEdit(row) {
      router.push({name: 'EditGoods', params: {id: row.id}})
    },
    handleDelete (row) {
      deleteGoods(row.id).then(res => {
        if (res.code === 0) {
          this.$refs.table.refresh()
          this.$message.success('删除成功')
        }
      })
    },
    showInfoList(row){
      const vm = this
      vm.selectedGoods = row
      vm.skus = vm.selectedGoods.skus.map(item => Object.assign({}, item, {stock: 0, add_stock: 0}))
      vm.fTags = this.tags.filter(item => item.type === vm.selectedGoods.is_online || item.type === 9)
      getGoodsInfoList(row.id).then(res => {
        if (res.code === 0){
          vm.infoList = res.data.data.map(item => {
            let len = item.sku_stock.length
            for (let i = 0; i < vm.skus.length; i++) {
              if (len > 0) {
                for (let j = 0; j < item.sku_stock.length; j++) {
                  if (vm.skus[i].id === item.sku_stock[j].sku_id) {
                    item.sku_stock[j]= Object.assign({}, vm.skus[i], item.sku_stock[j])
                  }
                }
              } else {
                item.sku_stock = vm.skus.map(item => {
                  return {
                    attrs: item.attrs,
                    sku_id: item.id,
                    stock: 0,
                    add_stock: 0
                  }
                })
              }
            }
            item.tids = item.tags.map(tag => tag.id)
            return Object.assign({}, item)
          })
        }
      })
      vm.infoListVisible = true
    },
    handleOk() {
      const vm = this
      updateInfos(vm.infoList).then(() => {
        vm.$message.success('添加成功')
        vm.$refs.table.refresh()
        vm.infoListVisible = false
      })
    },
    cancelAddInfo() {
      this.infoForm.resetFields()
      this.infoVisible = false
    },
    addInfo() {
      if (this.infoList.length === this.branches.length) {
        return false
      }
      let info = {
        branch_id: null,
        stock: 0,
        add_stock: 0,
        is_listing: false,
        recommended: false,
        weights: null,
        goods_id: this.selectedGoods.id,
        sku_stock: this.skus
      }
      this.infoList.push(info)
    },
    filterBranches(idx) {
      const vm = this
      let arr = []
      let list = vm.infoList.filter((item, index) => index !== idx)
      arr = this.branches.filter(item => {
        if (list.find(a => a.branch_id === item.id)) {
          return false
        } else {
          return true
        }
      })
      return arr
    }
  }
}
</script>
<style scoped>
.add-btn {
  margin-bottom: 10px;
}
.wawa-info {
  background-color: #fff;
  padding: 10px;
  border: 1px solid #e5e5e5;
}
.wawa-info-group {
  position: relative;
  padding: 10px 0;
}
.wawa-info-group .group-title {
  position: relative;
  padding: 7px 10px;
  margin: 0;
  background-color: #f8f8f8;
  font-size: 14px;
  line-height: 16px;
  font-weight: 400;
}
.wawa-info-group .group-container {
  padding: 10px 10px 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
}
</style>
